CSS 最佳实践 + 套路（一） -- 概述

资源

  1. Google: 关键词 MDN
  2. CSS Tricks
  3. Google: 阮一峰 css
  4. 张鑫旭的 240 多篇 CSS 博客
  5. Codrops 炫酷 CSS 效果
  6. CSS揭秘
  7. CSS 2.1 中文 spec
  8. Magic of CSS 免费在线书

    引入CSS

  9. 内联样式 ==> style属性 ==> style= 'color: red; width: 200px; height:200px;'

  10. 内嵌样式 ==> style 标签 ==> 

    1
    2
    3
    4
    5
    6
    <style>
      body{
        background: gray;
        font-size: 12px;
      }
    </style>

  11. 外联样式 ==> <link> 标签 ==> 

    1
    <link rel= 'stylesheet' href= ''>

  12. @import url(./b/css)

最佳实践 & 套路

reset CSS

1
2
*{ margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6, p{ margin: 0; padding: 0; }

清除浮动

添加到浮动元素的父元素上。

1
2
3
4
5
.clearfix::after{
    content: '';
    display: block;
    clear: both;
}

相关知识点

元素分类：

  • 块级元素：block ==> display: block;
  • 内联元素：inline ==> display: inline;
  • 内联块级元素：inline-block ==> display: inline-block;